import baseBehavior from '../helpers/baseBehavior'
import mergeOptionsToData from '../helpers/mergeOptionsToData'

const defaults = {
    id: "",
    type: "",
    top: 0,
    left: 0,
    x: 0,
    y: 0,
    scale: 1,
    angle: 0,
    active: false,
    width: 0,
    height: 0,
    image_close: "",
    image_move: '',
}
const windowWidth = 750;

Component({
    behaviors: [baseBehavior],
    externalClasses: ['wux-class'],
    data: mergeOptionsToData(defaults),
    options: {
        multipleSlots: true // Enable multi-slot support in the option of component definition
    },
    methods: {
        /**
         * 删除组件
         */
        onDel() {

        },
        /**
         * 移动组件函数 start
         */
        moveStart(e) {
            //获取作为移动前角度的坐标
            this.tx = e.touches[0].clientX;
            this.ty = e.touches[0].clientY;
            this.x = this.data.x;
            this.y = this.data.y;
            console.log("11111111111111", this.tx)
            console.log("11111111111111", this.ty)
                //移动前的角度
            this.anglePre = this.countDeg(this.x, this.y, this.tx, this.ty)
                //获取图片半径
            this.r = this.getDistancs(this.x, this.y, this.left, this.top)
        },
        onMove(e) {
            //移动时的坐标值也写图片的属性里
            this._lx = e.touches[0].clientX || 0;
            this._ly = e.touches[0].clientY || 0;

            //追加改动值
            this.lx ? this.lx : this.lx = 0;
            this.ly ? this.ly : this.ly = 0;
            this.left ? this.left : this.left = 0;
            this.top ? this.top : this.top = 0;
            console.log(this.lx)
            console.log(this.ly)
            console.log(this._lx)
            console.log(this._ly)
            this.left += this._lx - this.lx; // x方向
            this.top += this._ly - this.ly; // y方向
            this.x += this._lx - this.lx;
            this.y += this._ly - this.ly;

            console.log(this.left)
            console.log(this.top)
                //把新的值赋给老的值
            this.lx = e.touches[0].clientX;
            this.ly = e.touches[0].clientY;

            //记录移动后的位置
            this._tx = e.touches[0].clientX;
            this._ty = e.touches[0].clientY;
            //移动的点到圆心的距离  * 因为圆心的坐标是相对与父元素定位的 ，所有要减去父元素的OffsetLeft和OffsetTop来计算移动的点到圆心的距离
            this.disPtoO = this.getDistancs(this.x, this.y, this._tx - windowWidth * 0.125, this._ty - 10)

            this.scale = this.disPtoO / this.r; //手指滑动的点到圆心的距离与半径的比值作为图片的放大比例
            this.oScale = 1 / this.scale; //图片放大响应的右下角按钮同比缩小

            //移动后位置的角度
            this.angleNext = this.countDeg(this.x, this.y, this._tx, this._ty)
                //角度差
            this.new_rotate = this.angleNext - this.anglePre;

            //叠加的角度差
            this.rotate += this.new_rotate;
            this.angle = this.rotate; //赋值

            //用过移动后的坐标赋值为移动前坐标
            this.tx = e.touches[0].clientX;
            this.ty = e.touches[0].clientY;
            this.anglePre = this.countDeg(this.x, this.y, this.tx, this.ty)


            this.$$setData({
                left: this.left,
                top: this.top,
                y: this.y,
                x: this.x,
                angle: this.angle,
                Scale: this.scale,
            })
            console.log(this.data.left);
            console.log(this.data.top);

        },
        //获取数据移动前的角度
        countDeg(cx, cy, pointer_x, pointer_y) {
            var ox = pointer_x - cx;
            var oy = pointer_y - cy;
            var to = Math.abs(ox / oy);
            var angle = Math.atan(to) / (2 * Math.PI) * 360; //鼠标相对于旋转中心的角度
            console.log("ox.oy:", ox, oy)
            if (ox < 0 && oy < 0) //相对在左上角，第四象限，js中坐标系是从左上角开始的，这里的象限是正常坐标系  
            {
                angle = -angle;
            } else if (ox <= 0 && oy >= 0) //左下角,3象限  
            {
                angle = -(180 - angle)
            } else if (ox > 0 && oy < 0) //右上角，1象限  
            {
                angle = angle;
            } else if (ox > 0 && oy > 0) //右下角，2象限  
            {
                angle = 180 - angle;
            }
            return angle;
        },
        //计算触摸点到圆心的距离

        getDistancs(cx, cy, pointer_x, pointer_y) {
            var ox = pointer_x - cx;
            var oy = pointer_y - cy;
            return Math.sqrt(
                ox * ox + oy * oy
            );
        },

        //旋转放大缩小事件


        /**
         * 组件关闭时重置其内部数据
         */
        onClosed() {
            if (this.data.resetOnClose) {
                const params = {
                    ...mergeOptionsToData(defaults),
                    prompt: null,
                }

                this.$$setData(params)
            }
        },
        /**
         * 点击 x 或 mask 回调
         */
        onClose() {
            this.hide()
        },
        /**
         * 隐藏
         */
        hide(cb) {
            this.$$setData({ in: false })
            if (typeof cb === 'function') {
                cb.call(this)
            }
        },
        /**
         * 显示
         */
        show(opts = {}) {
            const options = this.$$mergeOptionsAndBindMethods(Object.assign({}, defaults, opts))
            this.$$setData({ in: true, ...options })
            return this.hide.bind(this)
        },
        /**
         * 按钮点击事件
         */
        buttonTapped(e) {
            const { index } = e.currentTarget.dataset
            const button = this.data.buttons[index]
            this.hide(() => typeof button.onTap === 'function' && button.onTap(e))
        },
        /**
         * 当键盘输入时，触发 input 事件
         */
        bindinput(e) {
            this.$$setData({
                'prompt.response': e.detail.value,
            })
        },
        /**
         * 显示dialog组件
         * @param {Object} opts 配置项
         * @param {String} opts.title 提示标题
         * @param {String} opts.content 提示文本
         * @param {Boolean} opts.verticalButtons 是否显示垂直按钮布局
         * @param {Array} opts.buttons 按钮
         * @param {String} opts.buttons.text 按钮的文字
         * @param {String} opts.buttons.type 按钮的类型
         * @param {Boolean} opts.buttons.bold 是否加粗按钮的文字
         * @param {Function} opts.buttons.onTap 按钮的点击事件
         */
        open(opts = {}) {
            return this.show(opts)
        },
        /**
         * 显示dialog组件
         * @param {Object} opts 配置项
         * @param {String} opts.title 提示标题
         * @param {String} opts.content 提示文本
         * @param {String} opts.confirmText 确定按钮的文字，默认为"确定"
         * @param {String} opts.confirmType 确定按钮的类型
         * @param {Function} opts.onConfirm 确定按钮的点击事件
         */
        alert(opts = {}) {
            return this.open(Object.assign({
                buttons: [{
                    text: opts.confirmText || defaultOptions.confirmText,
                    type: opts.confirmType || defaultOptions.confirmType,
                    onTap: (e) => {
                        typeof opts.onConfirm === 'function' && opts.onConfirm(e)
                    },
                }, ],
            }, opts))
        },
        /**
         * 显示dialog组件
         * @param {Object} opts 配置项
         * @param {String} opts.title 提示标题
         * @param {String} opts.content 提示文本
         * @param {String} opts.confirmText 确定按钮的文字，默认为"确定"
         * @param {String} opts.confirmType 确定按钮的类型
         * @param {Function} opts.onConfirm 确定按钮的点击事件
         * @param {String} opts.cancelText 取消按钮的文字，默认为"取消"
         * @param {String} opts.cancelType 取消按钮的类型
         * @param {Function} opts.onCancel 取消按钮的点击事件
         */
        confirm(opts = {}) {
            return this.open(Object.assign({
                buttons: [{
                        text: opts.cancelText || defaultOptions.cancelText,
                        type: opts.cancelType || defaultOptions.cancelType,
                        onTap: (e) => {
                            typeof opts.onCancel === 'function' && opts.onCancel(e)
                        },
                    },
                    {
                        text: opts.confirmText || defaultOptions.confirmText,
                        type: opts.confirmType || defaultOptions.confirmType,
                        onTap: (e) => {
                            typeof opts.onConfirm === 'function' && opts.onConfirm(e)
                        },
                    },
                ],
            }, opts))
        },
        /**
         * 显示dialog组件
         * @param {Object} opts 配置项
         * @param {String} opts.title 提示标题
         * @param {String} opts.content 提示文本
         * @param {String} opts.fieldtype input 的类型，有效值：text, number, idcard, digit
         * @param {Boolean} opts.password 是否是密码类型
         * @param {String} opts.defaultText 默认值
         * @param {String} opts.placeholder 输入框为空时占位符
         * @param {Number} opts.maxlength 最大输入长度，设置为 -1 的时候不限制最大长度
         * @param {String} opts.confirmText 确定按钮的文字，默认为"确定"
         * @param {String} opts.confirmType 确定按钮的类型
         * @param {Function} opts.onConfirm 确定按钮的点击事件
         * @param {String} opts.cancelText 取消按钮的文字，默认为"取消"
         * @param {String} opts.cancelType 取消按钮的类型
         * @param {Function} opts.onCancel 取消按钮的点击事件
         */
        prompt(opts = {}) {
            const prompt = {
                fieldtype: opts.fieldtype ? opts.fieldtype : 'text',
                password: !!opts.password,
                response: opts.defaultText ? opts.defaultText : '',
                placeholder: opts.placeholder ? opts.placeholder : '',
                maxlength: opts.maxlength ? parseInt(opts.maxlength) : '',
            }

            return this.open(Object.assign({
                prompt: prompt,
                buttons: [{
                        text: opts.cancelText || defaultOptions.cancelText,
                        type: opts.cancelType || defaultOptions.cancelType,
                        onTap: (e) => {
                            typeof opts.onCancel === 'function' && opts.onCancel(e)
                        },
                    },
                    {
                        text: opts.confirmText || defaultOptions.confirmText,
                        type: opts.confirmType || defaultOptions.confirmType,
                        onTap: (e) => {
                            typeof opts.onConfirm === 'function' && opts.onConfirm(e, this.data.prompt.response)
                        },
                    },
                ],
            }, opts))
        },
    },
});